iT邦幫忙

2022 iThome 鐵人賽

DAY 10
0
Modern Web

JS 忍者訓練計畫系列 第 10

閉包封鎖之術(上) Day9

  • 分享至 

  • xImage
  •  

閉包(closure)的實作包含一個外層函式包裹一個內層函式,而宣告過後並不馬上執行這也讓閉包的使用不直覺,需要多閱讀一些程式碼與設計方法來熟悉。讀完這一章並沒有馬上能想到跟理解實際應用場景,但先更深入發掘了函式多變的使用方式。

裡面包括定義私有變數、Curry 化的使用、進階設定函式上下文(context)、部分套用函式並使用到 prototype 在下一章節會提到、改寫原本函式行為等進階應用等等。

這章想學到什麼?

  • 複習私有變數、回呼與計時器
  • 熟悉綁定上下文
  • 熟悉套用部分函式

程式碼閱讀練習與撰寫

複習私有變數、回呼與計時器?

//私有變數 faint 的使用
function Ninja() {
    var faint = 0; //私有變數在這裡
    
    this.getFeints = function(){
        return feints;
    }
    
    this.feint = function(){
        faint++;
    }
}

var ninja = new Ninja();

ninja.feint();

//callback 與計時器
function animateIt(element) {

    var elem = document.querySelector(element);
    var tick = 0;
    
    var timer = setInterval(function(){
        if(tick < 100) {
            elem.style.position = "relative";
            elem.style.left = elem.style.top = tick + "px";
            tick++;
        } else {
            clearInterval(timer);
        }
    }, 10)
    
}
animateIt(".header__logo");

熟悉綁定上下文

function bind(context,name){
    return function(){
        return context[name].apply(context, arguments);
    };
}

var button = {
    clicked: false,
    click: function(event){
        event.preventDefault()
        this.clicked = true;
        console.log(this)
    }
}

var elem = document.querySelector(".header__logo");
elem.addEventListener("click", bind(button, "click"), false);

熟悉套用部分函式

Function.prototype.partial = function(){
  var fn = this, args = Array.prototype.slice.call(arguments);
  return function() {
      var arg = 0;
      for (var i = 0; i < args.length && arg < arguments.length; i++) {
          if (args[i] === undefined) {
              args[i] = arguments[arg++]
          }
      }
      return fn.apply(this, args);
  }
}

String.prototype.csv = String.prototype.split.partial(/,\s*/);

var results = ("Mugan, Jin, Fuu").csv();

Failure is simply the opportunity to begin again, this time more intelligently.

參考資料

https://jigsawye.gitbooks.io/mostly-adequate-guide/content/ch4.html


上一篇
揮舞函式之劍(下) Day8
下一篇
閉包封鎖之術(下) Day10
系列文
JS 忍者訓練計畫30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言